
$(document).ready(function(){
    // 获取导航栏到屏幕顶部的距离
    var oTop = $("#nav").offset().top;
    //获取导航栏的高度，此高度用于保证内容的平滑过渡
    var martop = $('#nav').outerHeight();
    var sTop = 0;
    // 监听页面的滚动
    $(window).scroll(function () {
        // 获取页面向上滚动的距离
        sTop = $(this).scrollTop();
        // 当导航栏到达屏幕顶端
        if (sTop >= oTop) {
            $("#nav").addClass("navbar-fixed-top");
            $("#nav").addClass('navbar-default');

        } else {
            $("#nav").removeClass("navbar-fixed-top");
            $("#nav").removeClass('navbar-default');
        }
    });
});